<template>
  <!--      头部-->
  <el-header class="header">
    <!--        :default-active="activeIndex"-->
    <el-menu
        class="el-menu-box"
        mode="horizontal"
        active-color="#409eff"
        :default-active="activeIndex"
        @select="handleSelect"
        router>
      <div class="logo">
        <router-link to="/">
          <img src="../assets/image/logo.png" alt="">
        </router-link>
      </div>
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/goods">全部商品</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
      <div class="search">
        <el-input placeholder="请输入搜索内容" id="search_inp" v-model="search">
        </el-input>
        <el-icon id="search_btn" @click="searchClick">
          <Search/>
        </el-icon>
      </div>
    </el-menu>
  </el-header>
  <!--      头部END-->
</template>

<script>
import {Search} from "@element-plus/icons-vue";
import router from "@/router";

export default {
  name: "Header",
  Components: {Search},
  data(){
    return {
      activeIndex: "/",//当前选中的导航栏
      search: "",//搜索的关键字
    };
  },
  computed: {
    activeIndex() {
      return router.currentRoute.value.path;
    },
  },
  methods:{
    // 点击搜索按钮
    searchClick() {
      if (this.search.toString() !== "") {
        // 跳转到全部商品页面,并传递搜索条件
        router.push({path: "/goods", query: {search: this.search}});
        this.search = "";
      }
    },
  }
}
</script>

<style scoped>

</style>
